ATOM Documentation

Mobile UI Testing Guide

Dev Server Status

✅ **Running on http://localhost:3000**

How to Test Mobile UI

Option 1: Browser DevTools (Recommended)

1. **Open Browser DevTools**

• Chrome/Edge: Press F12 or Cmd+Option+I (Mac) / Ctrl+Shift+I (Windows)
• Firefox: Press F12 or Cmd+Option+I (Mac) / Ctrl+Shift+I (Windows)

1. **Toggle Device Toolbar**

• Chrome/Edge: Press Cmd+Shift+M (Mac) / Ctrl+Shift+M (Windows)
• Firefox: Click responsive design mode icon or press Cmd+Option+M (Mac) / Ctrl+Shift+M (Windows)

1. **Select Mobile Device**

• Click device dropdown (default says "Responsive")
• Select from presets:
• **iPhone SE** (375x667) - Small mobile
• **iPhone 12 Pro** (390x844) - Standard mobile
• **iPad** (768x1024) - Tablet
• **iPad Pro** (1024x1366) - Large tablet

1. **Test Navigation**

• Go to http://localhost:3000/dashboard
• **Expected:** Mobile header with hamburger menu (top left)
• **Expected:** Bottom navigation bar (fixed at bottom)
• **Expected:** Desktop sidebar hidden

Option 2: Real Device Testing

1. **Find your local IP**

# On Windows

ipconfig

```

1. **Access from mobile device**

• Connect mobile device to same WiFi network
• Open browser and navigate to: http://YOUR_IP:3000
• Example: http://192.168.1.100:3000

Test Checklist

✅ Bottom Navigation Bar

• [ ] Visible only on mobile/tablet (not desktop)
• [ ] Fixed position at bottom of screen
• [ ] 4 tabs: Home, Agents, Canvas, Settings
• [ ] Active tab highlighted (cyan color)
• [ ] All tabs clickable
• [ ] Touch targets are large enough (min 44x44px)

**Test Steps:**

1. Open http://localhost:3000/dashboard in mobile view
2. Verify bottom navigation bar appears
3. Click each tab and verify navigation works
4. Check active state highlighting

✅ Mobile Header

• [ ] Hamburger menu icon visible (top left)
• [ ] ATOM logo visible
• [ ] Page title displayed (if applicable)
• [ ] Search icon (top right)
• [ ] Notifications icon (top right)

**Test Steps:**

1. View any page in mobile mode
2. Verify header elements are visible
3. Click hamburger menu

✅ Hamburger Menu (Slide-out Drawer)

• [ ] Opens when hamburger icon clicked
• [ ] Semi-transparent backdrop appears
• [ ] Drawer slides in from left
• [ ] Navigation sections visible (Main, Analytics, Account)
• [ ] Quick actions cards visible (New Agent, New Canvas)
• [ ] Close button works (X icon)
• [ ] Clicking backdrop closes menu
• [ ] Clicking nav item closes menu and navigates

**Test Steps:**

1. Click hamburger menu icon
2. Verify drawer animation
3. Test closing via X button
4. Test closing via backdrop click
5. Test navigation links

✅ Touch Targets

• [ ] All buttons minimum 44x44px
• [ ] Active state feedback (scale animation)
• [ ] No horizontal scroll on body
• [ ] Interactive elements have adequate spacing

**Test Steps:**

1. Inspect button sizes in DevTools
2. Tap buttons and verify visual feedback
3. Scroll page and verify no horizontal scroll

✅ Responsive Layouts

• [ ] Dashboard grid responsive (1 col mobile, 2 tablet, 3+ desktop)
• [ ] Agent cards stack vertically on mobile
• [ ] Tables scroll horizontally on mobile (no overflow)
• [ ] Modals full-screen on mobile

**Test Steps:**

1. View dashboard page in mobile viewport
2. Check grid layout adapts to screen size
3. Test responsive behavior on different device sizes

✅ Command Palette

• [ ] Full-screen on mobile
• [ ] Search input focused on open
• [ ] Keyboard navigation works (arrows + enter)
• [ ] Close button visible

**Test Steps:**

1. Open command palette (Cmd/Ctrl + K if available)
2. Verify full-screen layout on mobile
3. Test search and navigation

Viewport Testing

Test these viewport sizes:

Expected Behavior

Mobile (< 768px)

• ✅ Bottom navigation bar visible
• ✅ Hamburger menu visible
• ✅ Desktop sidebar hidden
• ✅ Single column layouts
• ✅ Full-screen modals

Tablet (768px - 1024px)

• ✅ Bottom navigation bar visible (or can be desktop sidebar)
• ✅ Responsive grid layouts (2 columns)

Desktop (> 1024px)

• ✅ Desktop sidebar visible
• ✅ Bottom navigation hidden
• ✅ Multi-column layouts (3-4 columns)
• ✅ Centered modals

Common Issues & Fixes

Issue: Bottom nav not visible

**Fix:** Check viewport width < 768px (md breakpoint)

Issue: Hamburger menu not working

**Fix:** Check console for JavaScript errors, verify MobileSidebar component

Issue: Horizontal scroll on body

**Fix:** Check for elements with overflow-x: auto or fixed widths

Issue: Touch targets too small

**Fix:** Add min-h-[44px] min-w-[44px] classes to buttons

Issue: Desktop sidebar showing on mobile

**Fix:** Verify hidden md:flex classes on sidebar

Debugging Tools

Chrome DevTools

// Check viewport size
console.log(window.innerWidth, window.innerHeight)

// Check if mobile navigation is mounted
document.querySelector('[data-testid="mobile-bottom-nav"]')

// Check if sidebar is hidden
document.querySelector('[data-testid="sidebar"]')

React DevTools

1. Install React DevTools browser extension
2. Inspect component tree
3. Check props on ConditionalShell component

Performance Testing

Lighthouse Mobile Score

1. Open Chrome DevTools
2. Go to Lighthouse tab
3. Select "Mobile" device
4. Run audit
5. Target: > 90 score

Check Bundle Size

npm run build
# Check output for page sizes

Screenshots to Capture

Take screenshots of:

• [ ] Dashboard on iPhone SE
• [ ] Dashboard on iPad
• [ ] Hamburger menu open
• [ ] Bottom navigation bar
• [ ] Mobile header
• [ ] Agents page on mobile
• [ ] Settings page on mobile

Reporting Issues

If you find issues, note:

1. Device/browser tested
2. Viewport size
3. Expected vs actual behavior
4. Console errors (if any)
5. Screenshot (if applicable)

---

**Happy Testing! 🧪**